//引入gulp自动化构建工具的模块
const gulp = require('gulp')
//引入html打包模块
const htmlMin = require('gulp-htmlmin')
//引入css打包模块
const cssMin = require('gulp-cssmin')
//引入sass打包模块
const sass = require('gulp-sass')(require('sass'))
//引入js打包模块
const uglify = require('gulp-uglify')
//引入babel语法转换模块
const babel = require('gulp-babel')
//引入删除任务
const del = require('del')

//引入server任务
const webServer = require('gulp-webserver')

//创建html任务
const htmlHandler = ()=>{
    //gulp.src()方法的作用是告诉gulp你要打包那个目录下的文件
    //告诉gulp要打包的是src目录下的任意目录下的任意名称的.html文件
    return gulp.src('./src/**/*.html') 
    //pipe()管道函数，作用是通过这个方法要把文件做怎么样的处理
    .pipe(htmlMin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        // removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS 
    })) 
    //gulp.dest()函数的作用是告诉gulp咱们最终把文件压缩后放到那个目录下
    .pipe(gulp.dest('./dist'))
}
//创建css任务
const cssHandler = ()=>{
    return gulp.src('./src/sass/*.scss')
    //要先把sass转成css任务
    .pipe(sass())
    //再把css进行打包处理
    .pipe(cssMin())
    .pipe(gulp.dest('./dist/css'))

}
//创建js任务
const jsHandler = ()=>{
    return gulp.src('./src/js/*.js')
    //先把ES6语法转成ES5语法再去进行压缩
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
}
//处理libs和img文件夹里面的文件
const libsHandler = ()=>{
    //第一个星表示任意文件名称，第二个星表示任意文件后缀名
    return gulp.src('./src/libs/**')
    .pipe(gulp.dest('./dist/libs'))
}
const imgHandler = ()=>{
    //第一个星表示任意文件名称，第二个星表示任意文件后缀名
    return gulp.src('./src/img/**')
    .pipe(gulp.dest('./dist/img'))
}
const iconHandler = ()=>{
    //第一个星表示任意文件名称，第二个星表示任意文件后缀名
    return gulp.src('./src/**/favicon.ico')
    .pipe(gulp.dest('./dist'))
}
const delHandler = ()=>{
    return del(['./dist'])
}

//配置服务器任务
const serverHandler = function () {
    //表示在服务器里面打开那个文件下的文件
    return gulp.src('./dist')
        .pipe(webServer({
            host: 'localhost',          // 配置打开浏览器的域名
            port: 2207,                 // 配置打开浏览器的端口号
            livereload: true,           // 自动刷新浏览器
            open: './index.html'  // 默认打开 dist 文件夹下的哪个文件
        }))
}
//创建一个 watch 任务
const watchHandler =  function () {
    gulp.watch('./src/**/*.html', htmlHandler) 
    gulp.watch('./src/sass/*.scss', cssHandler)
    gulp.watch('./src/js/*.js', jsHandler)
    gulp.watch('./src/libs/**', libsHandler)
    gulp.watch('./src/img/**', imgHandler)
    gulp.watch('./src/**/favicon.ico', iconHandler)
}

//先按照顺序执行同步任务
module.exports.default = gulp.series(
    delHandler,
    //先执行这里的任务
    gulp.parallel(htmlHandler, cssHandler, jsHandler, libsHandler, imgHandler, iconHandler),
    //再执行服务器任务
    serverHandler,
    watchHandler
)